<template>
	<view class="homePage">
		<!-- #ifdef APP-PLUS -->
		<uni-mdnav title="找人详情" rightIcon="notification"></uni-mdnav>
		<!-- #endif -->
		<!-- #ifdef MP -->
		<uni-mdnav title="找人详情"></uni-mdnav>
		<!-- #endif -->
		<view class="bg">
			<image src="https://aihelp.oss-cn-hangzhou.aliyuncs.com/kwkd/resources/personal/defaultBg.jpg" mode=""></image>
		</view>
		<view class="homeMain">
			<view class="info font14">
				<!-- 个人信息 -->
				<view class="flex alignCenter">
					<view class="avater">
						<image class="" :src="findInfo.createUserAvatar || 'https://image.alhelp.net/uploads/20231104/4d491857ac50d21ebbcb25ff5bc254f8.png'" mode="widthFix"></image>
					</view>
					<view class="lookPersonInfo">
						<view class="flex alignCenter justConBetween font16 nickName">
							<view class="bold">{{findInfo.createUserName || '匿名用户'}}</view>
							<view class="flex alignCenter">
								<image src="@/static/image/icons/b.png" mode="widthFix"></image>
								<view class="flex alignCenter"><text class="bold sharefont22 colorRed mathMagrin">{{findInfo.bounty}}</text>元</view>
							</view>
						</view>
						<view class="font14 color999 infoBox flex alignCenter">
							<image src="@/static/image/icons/ziliao.png" mode="widthFix"></image>
							<view class="">完善资料，获得更多推荐</view>
						</view>
					</view>
				</view>
				<view class="intro">
					<view class="font20 bold lookTitle">{{findInfo.title}}</view>
					<view class="flex alignCenter font14 lookTag">
						<view class="colorBlue">{{findInfo.schoolName}}</view>
						<view class="colorBlue">{{findInfo.majorName}}</view>
					</view>
					<view class="">{{findInfo.description}}</view>
				</view>
			</view>
			<view class="tabModule">
				<uni-tabchange :tabArr="tabArr" :activeTab="activeTab" :isFixed="false" @tabChangeSuccess="tabChangeSuccess"></uni-tabchange>
			</view>
			<!-- 接力 -->
			<view class="lookAboutModule" v-if="activeTab==0">
				<template v-for="(item,index) in listData">
					<view class="shareOne" @click="toHomePage(item)">
						<view class="flex alignCenter">
							<view class="avatar">
								<image :src="item.foundUserAvatar?item.foundUserAvatar:'https://image.alhelp.net/uploads/20231104/4d491857ac50d21ebbcb25ff5bc254f8.png'" mode="widthFix"></image>
							</view>
							<view class="shareInfo">
								<view class="flex alignCenter justConBetween">
									<view class="bold font14 hiddenOneline">{{item.foundUserName?item.foundUserName:'匿名用户'}}</view>
									<view class="font12 color999 time">{{item.createTime}}</view>
								</view>
								<!-- <view class="font14 hiddenOneline">这个是个人简介</view> -->
								<view class="font14 flex alignCenter colorBlue personTag">
									<text>{{item.foundSchoolName}}</text>
									<text>{{item.foundMajorName}}</text>
									
									<!-- <text>{{item.schoolName}}</text> -->
									<!-- <text>{{item.majorName}}</text> -->
								</view>
							</view>
						</view>
					</view>
				</template>
			</view>
			<!-- 揭榜 -->
			<view class="lookAboutModule" v-if="activeTab==1">
				<template v-for="(item,index) in listData">
					<view class="shareOne" @click="toHomePage(item)">
						<view class="flex alignCenter">
							<view class="avatar">
								<image :src="item.foundUserAvatar?item.foundUserAvatar:'https://image.alhelp.net/uploads/20231104/4d491857ac50d21ebbcb25ff5bc254f8.png'" mode="widthFix"></image>
							</view>
							<view class="shareInfo">
								<view class="flex alignCenter justConBetween">
									<view class="bold font14">{{item.foundUserName?item.foundUserName:'匿名用户'}}</view>
									<view class="font12 color999">{{item.createTime}}</view>
								</view>
								<!-- <view class="font14 hiddenOneline">这个是个人简介</view> -->
								<view class="font14 flex alignCenter colorBlue personTag">
									<text>{{item.foundSchoolName}}</text>
									<text>{{item.foundMajorName}}</text>
									<!-- <text>{{item.schoolName}}</text> -->
									<!-- <text>{{item.majorName}}</text> -->
								</view>
							</view>
						</view>
					</view>
				</template>
			</view>
			<uni-nodata v-if="listData.length==0"></uni-nodata>
		</view>
		<!-- 揭榜规则提示 -->
		<view class="font14 color333 rule">
			<image src="https://image.alhelp.net/uploads/20231104/1c7694e3fc848cd29d4b0d4d5fde7af1.png" mode="widthFix"></image>
			若有揭榜人，找人者需在24小时内确认揭榜者，否则系统会默认Ta就是要找的人。赏金将会给到对应的接力找人团。
		</view>
		<!-- 是自己发布的并且没有确认揭榜人就一直会有这个按钮 -->
		<view class="fixedBottomBtn shareBtn" v-if="(userId==findInfo.createUserId && findInfo.state<2)" @click="toShare">
			<image class="focusMargin" src="https://image.alhelp.net/uploads/20231104/db05a877babde8bbcce75893aced0760.png" mode="widthFix"></image>
			<text class="">分享</text>
		</view>
		<!-- 发布找人的信息是自己或者该找人已经找到了人就不会有这个按钮了 -->
		<view class="otherShowBtn" v-if="(userId!=findInfo.createUserId && findInfo.state<2)">
			<view class="noWidthBtn continue" @click="toShare">
				<image class="focusMargin" src="https://image.alhelp.net/uploads/20231104/db05a877babde8bbcce75893aced0760.png" mode="widthFix"></image>
				<text class="">我来接力找</text>
			</view>
			<view class="noWidthBtn isMy" @click="itsMeClick">
				<text class="">我就是</text>
				<image class="mathMagrin" src="@/static/image/icons/smile.png" mode="widthFix"></image>
			</view>
		</view>
		<!-- 揭榜成功 -->
		<uni-succ v-if="showSuccessTip" @layerOper="layerOper"></uni-succ>
	</view>
</template>

<script>
	import { detailFoundPerson,personList,relpayOper,askForEduInfo,
	 answerFind} from "@/api/lookFor.js"
	import uniSucc from "@/pages/send/components/uni-succ/uni-succ.vue"
	export default {
		components:{
			uniSucc
		},
		data() {
			return {
				activeTab:0,
				tabArr:[{
					title:'接力'
				},{
					title:'揭榜'
				}],
				listData:[],
				// noteData:[],
				isMine:true,
				findId:'',
				page:1,
				userId:'',
				shareUserId:'',
				pageSize:20,
				pageTotal:0,
				findInfo:'',
				showSuccessTip:false
			};
		},
		onLoad(option) {
			console.error("参数",option)
			this.userId=uni.getStorageSync('userId')
			// 分享进来的
			this.shareUserId=option.userId?option.userId:''
			this.findId=option.id?option.id:''
			this.activeTab=(option.activeTab!=null?option.activeTab:0)
			this.findDetail()
		},
		onShow() {
			this.getTabData()
		},
		methods:{
			// 根据tab获取数据
			getTabData(){
				this.page=1;
				this.listData=[];
				this.getPersonList()
			},
			tabChangeSuccess(obj){
				this.activeTab=obj.activeTab
				this.getTabData()
			},
			// 找人详情
			findDetail(){
				detailFoundPerson({id:this.findId}).then((res)=>{
					if(res.code==100000){
						this.findInfo=res.data
					}
				})
			},
			// 接力者、揭榜者列表
			getPersonList(){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				let param={
					page:this.page,
					size:this.pageSize,
					id:this.findId,
					foundPersonType:this.activeTab==0?3:4
				}
				personList(param).then((res)=>{
					uni.hideLoading()
					if(res.code==100000){
						if(this.page==1){
							this.listData=res.data.rows;
						}else{
							this.listData=this.listData.concat(res.data.rows)
						}
						this.pageTotal=Math.ceil(res.data.total/this.pageSize)
					}
				}).catch((err)=>{uni.hideLoading()})
			},
			toShare(){
				if(this.userId==this.findInfo.createUserId){
					// 我自己的
					let query={
						id:this.findId,
						inviteType:6
					}
					uni.navigateTo({
						url:`/pages/school/share/share?query=${JSON.stringify(query)}`
					})
				}else{
					// 接力找
					let param={
						id:this.findId,
						userId:this.shareUserId
					}
					console.error("接力",param)
					relpayOper(param).then((res)=>{
						if(res.code==100000){
							let query={
								id:this.findId,
								inviteType:6
							}
							uni.navigateTo({
								url:`/pages/school/share/share?query=${JSON.stringify(query)}`
							})
						}
					})
				}
			},
			itsMeClick(){
				askForEduInfo().then((res)=>{
					if(res.code==100000){
						// 教育信息状态：0：未填写；-1未通过；-2待审核；1:已通过（tag没写）；2：已通过:(fileUrls没写); 3已通过（tag没填和fileUrls没填）;4:已通过
						// 职业信息状态：0：未填写；-1未通过；-2待审核；4：已通过
						console.log('数据======',res)
						if(res.data.educationState==0){
							uni.showModal({
								title: '提示',
								content: '揭榜前需要完善您的教育信息，是否前往？',
								success: function (res) {
									if (res.confirm) {
										uni.navigateTo({
											url:'/pages/send/lookFor/postgraduate/enrollment/education?backDelta=3'
										})
									}
								}
							});
							return
						}
						if(res.data.educationState==-1){
							uni.showModal({
								title: '提示',
								content: '您的教育信息未通过，是否前往修改？',
								success: function (res) {
									if (res.confirm) {
										uni.navigateTo({
											url:'/pages/send/lookFor/postgraduate/enrollment/education?backDelta=3'
										})
									}
								}
							});
							return
						}
						if(res.data.educationState==-2){
							uni.showModal({
								title: '提示',
								content: '您的教育信息正在审核，通过后才可揭榜哦？',
								success: function (res) {
									if (res.confirm) {
										
									}
								}
							});
							return
						}
						if(res.data.educationState==1 || res.data.educationState==3){
							uni.showModal({
								title: '提示',
								content: '揭榜前需要完善您的个人优势信息，是否前往？',
								success: function (res) {
									if (res.confirm) {
										uni.navigateTo({
											url:'/pages/send/lookFor/postgraduate/enrollment/advantage?backDelta=2'
										})
									}
								}
							});
							return
						}
						if(res.data.educationState==2){
							uni.showModal({
								title: '提示',
								content: '揭榜前需要完善您的个人学历详细简介，是否前往？',
								success: function (res) {
									if (res.confirm) {
										uni.navigateTo({
											url:'/pages/send/lookFor/postgraduate/enrollment/info??backDelta=1'
										})
									}
								}
							});
							return
						}
						if(res.data.professionalState==0){
							uni.showModal({
								title: '提示',
								content: '揭榜前需要完善您的职业信息，是否前往？',
								success: function (res) {
									if (res.confirm) {
										uni.navigateTo({
											url:'/settingPages/pages/job/job'
										})
									}
								}
							});
							return
						}
						if(res.data.professionalState==-1){
							uni.showModal({
								title: '提示',
								content: '您的职业信息未通过，是否前往修改？',
								success: function (res2) {
									if (res2.confirm) {
										uni.navigateTo({
											url:'/settingPages/pages/job/job?id='+res.data.professionalId
										})
									}
								}
							});
							return
						}
						if(res.data.professionalState==-2){
							uni.showModal({
								title: '提示',
								content: '您的职业信息正在审核，通过后才可揭榜哦？',
								success: function (res) {
									if (res.confirm) {
										
									}
								}
							});
							return
						}
						// 若信息完善，则调用揭榜接口
						let param={
							id:this.findId,//找人id
							userId:this.shareUserId //分享者id
						}
						console.log('findId',param);
						answerFind(param).then((res)=>{
							if(res.code==100000){
								this.showSuccessTip=true
								this.findDetail()
								this.getTabData()
							}
						})
					}
				})
				
				// uni.navigateTo({
				// 	url:'/pages/send/lookFor/itsMe/itsMe'
				// })
			},
			// 去个人主页，查看揭榜者
			toHomePage(item){
				let url=''
				if(this.activeTab==0){
					// 接力
					url='/pages/mine/homePage/homePage?userId='+item.foundUserId
				}else{
					// 揭榜-是发布找人本人并且没有去操作这个人的揭榜到个人主页才会有确定是否是要找的那个人的按钮
					if(this.findInfo.createUserId==uni.getStorageSync('userId') && item.state==0){
						url='/pages/mine/homePage/homePage?userId='+item.foundUserId+'&isUnveiling='+true+'&parentId='+item.parentId+'&findId='+item.id
					}else{
						url='/pages/mine/homePage/homePage?userId='+item.foundUserId
					}
				}
				uni.navigateTo({
					url:url
				})
			},
			layerOper(type){
				if(type=='cancel'){
					this.showSuccessTip=false
				}else{
					uni.navigateTo({
						url:'/pages/mine/queAndAnswer/queAndAnswer'
					})
				}
			}
		},
		onPullDownRefresh() {
			this.getTabData()
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},1000)
		},
		onReachBottom() {
			if(this.page<this.pageTotal){
				++this.page
				this.getPersonList()
			}else{
				uni.showToast({
					title:'我也是有底线的',
					icon:'none'
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
// 自定义导航栏
::v-deep .uni-navbar{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
}
::v-deep .uni-navbar__content{
	background-color: transparent !important;
	border:none;
}
::v-deep .uni-navbar__header{
	background-color: transparent !important;
}
.homePage{
	padding: 0 0 310rpx;
	box-sizing: border-box;
}
.bg{
	height: 320rpx;
	overflow: hidden;
	image{
		width: 100%;
		height: 100%;
	}
}
.homeMain{
	padding: 0 0 30rpx;
	box-sizing: border-box;
	background:#fff;
	position: relative;
	margin:-110rpx 0 0;
	border-radius: 50rpx 50rpx;
	z-index: 2;
	
	.info{
		padding: 0 30rpx 0;
		margin:0 0 60rpx;
		.avater{
			width: 180rpx;
			height: 180rpx;
			border-radius: 50%;
			margin:-60rpx 20rpx 0 0;
			flex-shrink: 0;
			box-sizing: border-box;
			box-shadow: 0 1px 15rpx rgba(0,0,0,.3);
			image{
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
		.lookPersonInfo{
			width:100%;
		}
		.nickName{
			padding:10rpx 0 0;
			image{
				width: 48rpx;
				height: 48rpx;
			}
		}
		.infoBox{
			margin: 10rpx 0 0;
			image{
				width: 36rpx;
				height: 36rpx;
			}
		}
		.intro{
			margin:40rpx 0;
			.lookTitle{
				margin:0 0 30rpx;
			}
			.lookTag{
				margin: 0 0 40rpx;
				view{
					margin-right: 20rpx;
				}
			}
		}
	}
	.tabModule{
		padding: 0 180rpx 0;
		box-sizing: border-box;
		margin: 0 0 30rpx;
	}
	.lookAboutModule{
		.shareOne{
			background:#fff;
			padding: 30rpx;
			box-sizing: border-box;
			border-bottom: 20rpx solid $pageBgColor;
			.avatar{
				width:112rpx;
				height:112rpx;
				flex-shrink: 0;
				margin-right: 20rpx;
				position: relative;
				image{
					border-radius: 50%;
					width:100%;
					height:100%;
				}
			}
		}
		.shareOne:last-child{
			border: none;
		}
		.shareInfo{
			width:100%;
			.personTag{
				margin: 30rpx 0 0;
				text{
					margin: 0 30rpx 0 0;
				}
			}
			.time{
				flex-shrink: 0;
			}
		}
	}
}
.groupList{
	padding: 0 30rpx;
	box-sizing: border-box;
	&>view{
		flex:0 0 48%;
	}
	.groupOne{
		margin-bottom: 30rpx;
		border-radius:8rpx;
	}
}
.rule{
	position: fixed;
	bottom: 130rpx;
	width:80%;
	border-radius:24rpx;
	box-shadow: 0 0 10rpx rgba(153, 153, 153, .35);
	left:10%;
	padding:30rpx;
	box-sizing: border-box;
	background: #fff;
	z-index: 20;
	image{
		width: 100rpx;
		height: 100rpx;
		margin:-50rpx 0 0 -50rpx;
		// mix-blend-mode:overlay;
	}
}
.shareBtn,
.otherShowBtn{
	background: $colorblue;
	font-size: $font16;
	image{
		width: 40rpx;
		height: 40rpx;
		vertical-align: middle;
		margin-top: -3rpx;
	}
}
.otherShowBtn{
	width: 100%;
	background:none;
	text-align: center;
	position: fixed;
	bottom:30rpx;
	left:0;
	z-index: 10;
	&>view{
		width: 270rpx;
		height: 80rpx;
		font-size: $font16;
		line-height: 80rpx;
		display: inline-block;
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.continue{
		border-radius: 80rpx 0 0 80rpx;
		background: $colorblue;
	}
	.isMy{
		border-radius: 0 80rpx 80rpx 0;
	}
}
</style>
